class Star {
	constructor(x, y, vx, vy, radius, color) {
		this.x = x;
		this.y = y;
		this.vx = vx;
		this.vy = vy;
		this.radius = radius;
		this.color = color;
	}
	//画球的方法
	draw(context) {
		context.beginPath();
		context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
		context.closePath();
		context.fillStyle = this.color;
		context.fill();
	}
}
//2.1 获取画布
let cvs = document.getElementById('box');
// console.log(cvs);

//2.2 需要提供一支画笔 getContext() 方法返回一个用于在画布上绘画的环境

let context = cvs.getContext('2d');

//开始画画
let star = new Star(0, 0, 12, 2, 3, '#fff');
let star2 = new Star(10, 0, 8, 2, 2, '#ffffff');
let star3 = new Star(12, 0, 8, 10, 2, '#fff');
let star4 = new Star(10, 300, 16, -3, 2, '#ababab');
let star5 = new Star(12, 80, 20, 1, 2, '#55ffff');
let star6 = new Star(-100, 110, 8, 3, 2, '#ffc20b');
let star7 = new Star(10, 20, 6, 2, 4, '#ffe2e1');
let star8 = new Star(10, 0, 3, 2, 2, '#ffffff');
let star9 = new Star(10, 0, 8, 2, 2, '#ffffff');

setInterval(() => {
	context.fillStyle = 'rgba(0, 0, 0,0.1)';
	globaCompositeOperation = 'destination-in';
	context.fillRect(0, 0, 1400, 1000);
	//改变圆的圆心坐标
	star.x += star.vx;
	star.y += star.vy;
	star2.x += star2.vx;
	star2.y += star2.vy;
	star3.x += star3.vx;
	star3.y += star3.vy;
	star4.x += star4.vx;
	star4.y += star4.vy;
	star5.x += star5.vx;
	star5.y += star5.vy;
	star6.x += star6.vx;
	star6.y += star6.vy;
	star7.x += star7.vx;
	star7.y += star7.vy;
	star8.x += star8.vx;
	star8.y += star8.vy;
	star9.x += star9.vx;
	star9.y += star9.vy;

	star.draw(context);
	star2.draw(context);
	star3.draw(context);
	star4.draw(context);
	star5.draw(context);
	star6.draw(context);
	star7.draw(context);
	star8.draw(context);
	star9.draw(context);
}, 20);
